<template>
<div>
    <el-row :gutter="10">
      <el-col :span="5">
        <el-card>
        <div style="padding:5px 15px">
            <div class="timers">
              {{ dateYear }}
            </div>
          <div class="timers">
            {{ dateWeek }} {{ dateDay }}
          </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card>
          <div style="height: 50px">
            <el-statistic title="农田区域划分总数">
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="formatter">540</template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card>
          <div style="height: 50px">
          <el-statistic title="今日浇水区域数">
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: red"></i>
            </template>
            <template slot="formatter">315</template>
            <template slot="suffix">
              <i class="el-icon-s-flag" style="color: blue"></i>
            </template>
          </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card>
          <div style="height: 50px">
          <el-statistic title="区域异常数">
             <template slot="prefix">
               <i class="el-icon-s-flag" style="color: red"></i>
             </template>
            <template slot="formatter">65</template>
            <template slot="suffix">
               <i class="el-icon-s-flag" style="color: blue"></i>
             </template>
           </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card>
          <div style="height: 50px">
            <el-statistic  title="预灌溉区域数">
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="formatter">157</template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
    </el-row>
     <div style="padding: 20px 0">
        <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div style="width: 100%;height:420px" id="line"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div style="width: 100%;height: 420px" id="bar"></div>
        </el-card>
      </el-col>
    </el-row>
     </div>
      </div>
</template>

<script>
import * as echarts from 'echarts'
import { formatTime } from "@/utils"

const option = {
  title:{
    text: '每日灌溉区域趋势图',
    left: 'center'
  },
  tooltip:{
    trigger: 'axis'
  },
  legend:{
    //默认水平
    orient: 'vertical',  // 垂直
    left: 'right'
  },
  xAxis:{
    type:'category',
    data:[],
  },
  yAxis:{
    type: 'value'
  },
  series:[
    {
      name: '已灌溉数',
      data:[],
      center:['60%', '70%'],
      type:'line',
      color:'green',
      smooth: true,
    },
    {
      name: '预计灌溉数',
      data:[],
      type:'line',
      color:'blue',
      smooth: true
    },
    {
      name: '异常区域数',
      data:[],
      type:'line',
      color:'red',
      smooth: true
    }
  ]
}
const option1 = {
  title:{
    text: '灌溉区域的饼图',
    left: 'center'
  },
  tooltip:{
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    orient: 'vertical',
    data: ['已灌溉数', '预计灌溉数', '异常区域数'],
    left: 'right'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis:{
    type:'category',
    axisTick: {
      show: false
    },
    data:[]
  },

  xAxis:{
    type: 'value'
  },
  series:[
    {
      name: '预计灌溉数',
      data:[],
      type:'bar',
      center:['50%', '70%'],
      smooth: true,
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
    },
    {
      name: '已灌溉数',
      data:[],
      type:'bar',
      smooth: true,
      stack: 'Total',
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
    },
    {
      name: '异常区域数',
      data:[],
      type:'bar',
      smooth: true,
      stack: 'Total',
      color: 'red',
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
    }
  ]
}


export default {
  name: "Home",
  data() {
    return {
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      like: true,
      value1: 143,
      value2: 500,
      value:'',
      timing:null,
      dateDay:null,
      dateYear:null,
      dateWeek:null,
       weekday: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] ,
    }
  },
  mounted() {//等待页面的元素全部加载完成之后再初始化
    this.fetchPlanStatistics();
    this.timeFn();
    //折线图
    let linetDom = document.getElementById('line');
    let lineChart = echarts.init(linetDom);

    //柱状图
    let bartDom = document.getElementById('bar');
    let barChart = echarts.init(bartDom);
    barChart.setOption(option1)

    this.$request.get('/charts').then(res =>{
      //折线
      option.xAxis.data = res.data?.line?.map(v => v.date) || []
      option.series[0].data = res.data?.line?.map(v => v.value1) || []
      option.series[1].data = res.data?.line?.map(v => v.value2) || []
      option.series[2].data = res.data?.line?.map(v => v.value3) || []
      lineChart.setOption(option)

      //柱状
      option1.yAxis.data = res.data?.bar?.map(v => v.date) || []
      option1.series[0].data = res.data?.bar?.map(v => v.value1) || []
      option1.series[1].data = res.data?.bar?.map(v => v.value2) || []
      option1.series[2].data = res.data?.bar?.map(v => v.value3) || []
      barChart.setOption(option1)

    })
  },
  beforeDestroy() {
    clearInterval(this._timing);
  },
  methods:{
    fetchPlanStatistics() {
    },
// 每秒循环一次
    timeFn() {
      this._timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH:mm:ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    }

  },
}


</script>

<style scoped>
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>